<template>
  <div class="user-management">
    <!-- 编辑对话框 -->
    <div class="edit-dialog" v-if="showEditDialog">
      <div class="dialog-overlay" @click="showEditDialog = false"></div>
      <div class="dialog-content">
        <h3>编辑用户</h3>
        <!-- 删除职工号编辑字段 -->
        <div class="form-group">
          <label>用户名</label>
          <input type="text" v-model="editingUser.username">
        </div>
        // ... 其他编辑字段 ...
        <div class="dialog-actions">
          <button class="reset-password-btn" @click="resetPassword">重置密码</button>
          <button class="confirm-btn" @click="saveUser">保存</button>
          <button class="cancel-btn" @click="showEditDialog = false">取消</button>
        </div>
      </div>
    </div>
    <!-- 标题和操作按钮 -->
    <div class="header-section">
      <h1>用户管理</h1>
      <div class="action-buttons">
        <button class="export-btn">
          <i class="material-icons">download</i>导出
        </button>
      </div>
    </div>

    <!-- 搜索和筛选区域 -->
    <div class="filter-section">
      <div class="search-box">
        <input 
          type="text" 
          v-model="searchQuery"
          placeholder="搜索用户名或邮箱..."
        >
        <button class="search-btn">
          <i class="material-icons">search</i>
        </button>
      </div>
      <div class="filter-options">
        <select v-model="selectedRole">
          <option>所有角色</option>
          <option>管理员</option>
          <option>老师</option>
          <option>学生</option>
        </select>
        <select v-model="selectedStatus">
          <option>所有状态</option>
          <option>活跃</option>
          <option>禁用</option>
        </select>
      </div>
    </div>

    <!-- 用户表格 -->
    <div class="table-container">
      <table>
        <thead>
          <tr>
            <!-- 删除职工号表头 -->
            <th>电话号</th>
            <th>角色</th>  <!-- 角色列前移 -->
            <th>邮箱</th>  <!-- 邮箱列后移 -->
            <th>状态</th>
            <th>注册时间</th>
            <th>最后登录</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(user, index) in filteredUsers" :key="index" :class="{'even-row': index % 2 === 0}">
            <!-- 删除职工号单元格 -->
            <td>{{ user.username }}</td>
            <td><span :class="'role-badge ' + user.role">{{ user.role }}</span></td>  <!-- 角色单元格前移 -->
            <td>{{ user.email }}</td>  <!-- 邮箱单元格后移 -->
            <td><span :class="'status-badge ' + user.status">{{ user.status }}</span></td>
            <td>{{ user.registeredAt }}</td>
            <td>{{ user.lastLogin }}</td>
            <td>
              <button class="edit-btn" @click="editUser(user)">编辑</button>
              <button class="delete-btn">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <div class="page-size">
        <span>显示</span>
        <select>
          <option>10</option>
          <option>20</option>
          <option>50</option>
        </select>
        <span>条/页</span>
      </div>
      <div class="page-nav">
        <button class="prev-btn">上一页</button>
        <button class="page-btn active">1</button>
        <button class="page-btn">2</button>
        <button class="next-btn">下一页</button>
      </div>
      <div class="page-info">
        <span>共 5 页</span>
      </div>
      <div class="page-jump">
        <button class="jump-btn">跳转</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const users = ref([
  {
    // 删除职工号字段
    username: 'admin',
    email: 'admin@star-rail.edu',
    role: '管理员',
    status: 'active',
    registeredAt: '2024-01-01',
    lastLogin: '2024-05-20 14:30'
  },
  {
    username: 'teacher1',
    name: '张老师',
    email: 'teacher1@star-rail.edu',
    role: '老师',
    status: 'active',
    registeredAt: '2024-02-15',
    lastLogin: '2024-05-19 09:15'
  },
  {
    username: 'student1',
    name: '李同学',
    email: 'student1@star-rail.edu',
    role: '学生',
    status: 'active',
    registeredAt: '2024-03-10',
    lastLogin: '2024-05-18 16:45'
  }
])

// 删除未使用的变量声明
// const navigateToUserManagement = () => {
//   router.push('/users')
// }

const searchQuery = ref('')
const selectedRole = ref('所有角色')
const selectedStatus = ref('所有状态')

const filteredUsers = computed(() => {
  return users.value.filter(user => {
    // 搜索条件匹配
    const matchesSearch = 
      user.username.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      user.email.toLowerCase().includes(searchQuery.value.toLowerCase())
    
    // 角色条件匹配
    const matchesRole = 
      selectedRole.value === '所有角色' || 
      user.role === selectedRole.value
    
    // 状态条件匹配
    const matchesStatus = 
      selectedStatus.value === '所有状态' || 
      user.status === selectedStatus.value.toLowerCase()
    
    return matchesSearch && matchesRole && matchesStatus
  })
})

const showEditDialog = ref(false)
const editingUser = ref({
  // 删除职工号字段
  username: '',
  email: '',
  role: '',
  status: 'active'
})

const editUser = (user) => {
  editingUser.value = {...user}
  showEditDialog.value = true
}

const saveUser = () => {
  const index = users.value.findIndex(u => u.username === editingUser.value.username)
  if (index !== -1) {
    users.value[index] = {...editingUser.value}
  }
  showEditDialog.value = false
}

const resetPassword = () => {
  // 这里添加重置密码逻辑
  // 可以调用API或直接修改用户数据
  alert(`已重置用户 ${editingUser.value.username} 的密码`)
}
</script>

<style scoped>
.user-management {
  padding: 2rem;
  background-color: #1a1a1a;
  min-height: calc(100vh - 70px);
  color: white;
  font-family: 'Noto Sans SC', sans-serif;
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.header-section h1 {
  font-weight: 700;
  font-size: 24px;
  color: white;
}

.action-buttons {
  display: flex;
  gap: 1rem;
}

.action-buttons button {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: white;
}

.add-user-btn {
  background: #3b82f6;
}

.export-btn {
  background: #10b981;
}

.filter-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.search-box {
  display: flex;
  align-items: center;
}

.search-box input {
  padding: 0.5rem 1rem;
  border-radius: 4px 0 0 4px;
  border: none;
  background: #333;
  color: white;
  width: 300px;
}

.search-btn {
  padding: 0.5rem 1rem;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.filter-options {
  display: flex;
  gap: 1rem;
}

.filter-options select {
  padding: 0.5rem;
  background: #333;
  color: white;
  border: none;
  border-radius: 4px;
}

.table-container {
  background: #252525;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 2rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 添加固定布局 */
}

th, td {
  text-align: center;
  padding: 1rem;
  width: 100px; /* 固定列宽 */
  height: 20px; /* 固定行高 */
  overflow: hidden; /* 内容超出时隐藏 */
  text-overflow: ellipsis; /* 超出显示省略号 */
  white-space: nowrap; /* 禁止换行 */
}

th {
  background: #333;
  font-weight: 500;
}

td {
  border-bottom: 1px solid #333;
  font-weight: 400;
}

.even-row {
  background-color: #2a2a2a;
}

.role-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

.role-badge.admin {
  background: #8b5cf6;
  color: white;
}

.role-badge.teacher {
  background: #3b82f6;
  color: white;
}

.role-badge.student {
  background: #10b981;
  color: white;
}

.status-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

.status-badge.active {
  background: #10b981;
  color: white;
}

.status-badge.inactive {
  background: #ef4444;
  color: white;
}

.edit-btn {
  color: #3b82f6;
  background: transparent;
  border: none;
  cursor: pointer;
  margin-right: 0.5rem;
}

.delete-btn {
  color: #ef4444;
  background: transparent;
  border: none;
  cursor: pointer;
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-size select {
  background: #333;
  color: white;
  border: 1px solid #444;
  padding: 0.25rem;
  border-radius: 4px;
  margin: 0 0.5rem;
}

.page-nav button {
  padding: 0.5rem 1rem;
  margin: 0 0.25rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

.page-btn {
  background: #333;
  color: white;
}

.page-btn.active {
  background: #3b82f6;
  color: white;
}

.prev-btn, .next-btn {
  background: #333;
  color: white;
}

.jump-btn {
  background: #333;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
</style>

<style >
.edit-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(5px);
}

.dialog-content {
  background: #252525;
  padding: 2rem;
  border-radius: 12px;
  width: 500px;
  max-width: 90%;
  z-index: 1001;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  border: 1px solid rgba(59,130,246,0.3);
}

.dialog-content h3 {
  margin-top: 0;
  color: white;
  font-family: 'Noto Sans SC', sans-serif;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(59,130,246,0.3);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #ddd;
  font-family: 'Noto Sans SC', sans-serif;
  font-size: 0.9rem;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 0.8rem;
  background: #333;
  border: 1px solid #444;
  border-radius: 8px;
  color: white;
  transition: all 0.2s ease;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.2);
}

.dialog-actions {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(59,130,246,0.3);
}

.reset-password-btn {
  background: #f59e0b;
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Noto Sans SC', sans-serif;
}

.confirm-btn {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Noto Sans SC', sans-serif;
}

.cancel-btn {
  background: #444;
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Noto Sans SC', sans-serif;
}

.reset-password-btn:hover {
  background: #d97706;
  transform: translateY(-2px);
}

.confirm-btn:hover {
  background: #2563eb;
  transform: translateY(-2px);
}

.cancel-btn:hover {
  background: #555;
  transform: translateY(-2px);
}
</style>